<!--
* @author wn
* @date 2022/04/29 15:04:21
* @description: 主页 新鲜好物骨架屏
!-->
<template>
	<div class="home-skeleton">
		<div class="item" v-for="i in 4" :key="i" :style="{ backgroundColor: bg }">
			<xtx-skeleton bg="#e4e4e4" width="306px" height="306px" animated />
			<xtx-skeleton bg="#e4e4e4" width="160px" height="24px" animated />
			<xtx-skeleton bg="#e4e4e4" width="120px" height="24px" animated />
		</div>
	</div>
</template>
<script>
export default {
	name: 'HomeSkeleton',
	props: {
		bg: {
			type: String,
			default: '#fff',
		},
	},
}
</script>
<style scoped lang="less">
.home-skeleton {
	display: flex;
	justify-content: space-between;
	width: 1240px;
	height: 406px;
	.item {
		width: 306px;
		.xtx-skeleton {
			~ .xtx-skeleton {
				display: block;
				margin: 16px auto 0;
			}
		}
	}
}
</style>
